import TinyReact from './TinyReact'

const root = document.getElementById('root')

// jsx代码，babel的preset-react自动识别，生成对接的js对象，即virtualDOM
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2>(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
  </div>
)

// 使用TinyReact里的render方法将虚拟dom转换成真实dom
// TinyReact.render(virtualDOM, root)

// 查看经过createElement处理后的virtualDOM结构是什么样的，有哪些属性和值
// console.log(virtualDOM)

/** 函数组件 */
// 情景一：只渲染一层的函数组件
// function Heart() {
//   return <div>&hearts;</div>
// }
// // console.log(Heart)
// TinyReact.render(<Heart/>, root)

// 情景二：嵌套的函数组件
// function Demo() {
//   return <div>
//     <h3>情景二：嵌套的函数组件</h3>
//     我是嵌套在Heart函数组件里的Demo组件
//   </div>
// }
// function Heart() {
//   // return <Demo />
//   return <div>&hearts;<Demo /></div>
// }
// TinyReact.render(<Heart />, root)

// 组件渲染之函数组件 prop 参数处理
// function Heart() {
//   return <div>
//     <h2>组件渲染之函数组件 prop 参数处理</h2>
//     <h3>第一层函数组件</h3>
//     {this.props.name}
//     &hearts;
//     <Demo />
//   </div>
// }
// TinyReact.render(<Heart name="heart组件"/>, root)

/**类组件 */
// class Alert extends TinyReact.Component {
//   render() {
//     return <div>Hello React</div>
//   }
// }
// TinyReact.render(<Alert />, root)

// 组件渲染之类组件 props 处理
// class Alert extends TinyReact.Component {
//   // 继承了父类，拥有了父类的props
//   constructor(props) {
//     super(props)
//   }
//   render() {
//     return <div>
//       <hr />
//       <h2>组件渲染之类组件 props 处理</h2>
//       {this.props.name}
//       {this.props.age}
//     </div>
//   }
// }
// TinyReact.render(<Alert name="zzj" age={23}/>, root)

/**
 * 更新 DOM 元素之 VirtualDOM 对比(节点类型相同的情况)(一)
 */
 const modifyDOM = (
  <div className="container">
  <hr />
    <h1>你好 Tiny React</h1>
    <h2 data-test="test123">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <button onClick={() => alert("你好!!!!!")}>点击我</button>
    <input type="text" value="13" />
  </div>
)
TinyReact.render(virtualDOM, root)
setTimeout(() => {
  TinyReact.render(modifyDOM, root)
}, 2000)